function enlarge(){
    $('.small img').click(function(){
        $(this).addClass('active').siblings().removeClass('active')
        $('.big img').attr('src', $(this).attr('src') )
        $('.box>img').attr('src', $(this).attr('src') )
    })
    
    $('.box').hover(function(){
        $('.mask').show()
        $('.big').show()
        $('.box').mousemove(e=>{
            var x = e.pageX;
            var y = e.pageY;
            var left = x - $('.mask').width()/2
            var top = y - $('.mask').height()/2;
            if(left<$('.box').offset().left) left=$('.box').offset().left
            if(top<$('.box').offset().top) top=$('.box').offset().top
            if(left>$('.box').width()-$('.mask').width()+$('.box').offset().left) left=$('.box').width()-$('.mask').width()+$('.box').offset().left
            if(top>$('.box').height()-$('.mask').height()+$('.box').offset().top) top=$('.box').height()-$('.mask').height()+$('.box').offset().top
            $('.mask').offset({left,top})
    
            var bigLeft = (left - $('.box').offset().left) / $('.box').width() * $('.big img').width()
            var bigTop = (top - $('.box').offset().top) / $('.box').height() * $('.big img').height()
            $('.big img').css({
                left:-bigLeft + "px",
                top:-bigTop+"px"
            })
        })
    },function(){
        $('.mask').hide()
        $('.big').hide()
    })
}